<template>

    <div>
        <el-container>
            <el-aside style="width: 200px; min-height:100vh">
                <div style="height: 60px;background-color: #8c939d;color: white;display: flex ;justify-content: center;align-items: center">
                </div>
                <!--            default-active	当前激活菜单的 index      $route.path 当前浏览器访问的路由-->
                <el-menu router style="border:none" :default-active="$route.path">
                    <el-menu-item index="/">
                        <template slot="title">
                            <i class="el-icon-s-home>"></i>
                            <span>系统首页</span>
                        </template>
                    </el-menu-item>
                    <el-menu-item index="/element">Element</el-menu-item>
                    <el-menu-item>系统首页</el-menu-item>
                    <el-menu-item>系统首页</el-menu-item>
                    <el-menu-item>系统首页</el-menu-item>
                    <el-submenu>
                        <template slot="title">
                            <i class="el-icon-menu>"></i>
                            <span>信息管理</span>
                        </template>
                        <el-menu-item>用户信息</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
        </el-container>
        <!--    <el-row>-->
        <!--      <el-col :span="12">-->
        <!--        <div style="width: 100%;height: 300px;background-color: dodgerblue"></div>-->
        <!--      </el-col>-->
        <!--      <el-col :span="12">-->
        <!--        <div style="width: 100%;height: 300px;background-color: red"></div>-->
        <!--      </el-col>-->
        <!--    </el-row>-->


        <el-row>
            <el-col :span="6">

                <div style=" padding: 10px;border: 1px solid #ccc;text-align: center">
                    <img style="width: 80%" src="@/assets/logo.png" alt="">
                    <div style="">这是一段很牛的描述</div>
                    <div style="color: red">价格 ￥99.00</div>
                </div>

            </el-col>
            <el-col :span="6">
                <div style="padding: 10px;border: 1px solid #ccc;text-align: center">
                    <img style="width: 80%" src="@/assets/logo.png" alt="">
                    <div style="">这是一段很牛的描述</div>
                    <div style="color: red">价格 ￥99.00</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div style="padding: 10px;border: 1px solid #ccc;text-align: center">
                    <img style="width: 80%" src="@/assets/logo.png" alt="">
                    <div style="">这是一段很牛的描述</div>
                    <div style="color: red">价格 ￥99.00</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div style="padding: 10px;border: 1px solid #ccc;text-align: center">
                    <img style="width: 80%" src="@/assets/logo.png" alt="">
                    <div style="">这是一段很牛的描述</div>
                    <div style="color: red">价格 ￥99.00</div>
                </div>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                <el-button>Element独特按钮</el-button>
                <el-button type="primary">主要的按钮</el-button>
                <el-button type="danger">危险的按钮</el-button>
                <el-button type="warning">警告的按钮</el-button>
                <el-button type="info">危险的按钮</el-button>
                <el-button type="success">危险的按钮</el-button>

                <el-button type="primary" plain>朴素 主要的按钮</el-button>
                <el-button type="primary" plain round>圆角 主要的按钮</el-button>

                <el-button type="primary" circle>圆形 主要的按钮</el-button>

                <el-button circle icon="el-icon-edit" type="primary"></el-button>
                <el-button circle icon="el-icon-delete" type="danger"></el-button>


                <el-row style="margin-top: 20px">
                    <el-col>
                        <el-input style="width:200px;" v-model="value" placeholder="请输入内容"></el-input>
                        <el-input type="textarea" style="width:200px;" v-model="value1"></el-input>

                        <el-input show-password style="width:200px;" v-model="password" placeholder="请输入密码"></el-input>


                        <el-input style="width:200px;" v-model="value" placeholder="请输入内容"
                                  prefix-icon="el-icon-search"></el-input>
                        <el-input style="width:200px;" v-model="value2" placeholder="请输入内容"
                                  suffix-icon="el-icon-search"></el-input>
                        <el-input clearable style="width:200px;" v-model="value2" placeholder="请输入内容"
                                  prefix-icon="el-icon-search"></el-input>
                        <el-button>搜索</el-button>
                    </el-col>

                    <el-row style="margin: 20px 0">
                        <el-autocomplete style="width: 300px" placeholder="请输入内容，我来猜"
                                         :fetch-suggestions="querySearch" :trigger-on-focus="false" v-model="value4">
                        </el-autocomplete>
                    </el-row>


                </el-row>

                <el-row>
                    <el-select v-model="select" @change="changeSelect">
                        <el-option value="香蕉"></el-option>
                        <el-option value="橘子"></el-option>
                        <el-option value="菠萝"></el-option>
                    </el-select>

                    <el-select v-model="select1" @change="changeSelect" multiple>
                        <el-option v-for="item in fruits" :key="item.name" :label="item.name"
                                   :value="item.id"></el-option>
                    </el-select>

                    <el-select v-model="select2" @change="changeSelectUser" filterable>
                        <el-option v-for="item in users" :key="item.card" :label="item.label"
                                   :value="item.card"></el-option>
                    </el-select>

                </el-row>
            </el-col>
        </el-row>

        <el-row>
            <el-radio-group v-model="radio" @change="selectRadio">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
            </el-radio-group>

            <el-checkbox-group v-model="checkList" @change="selectCheckBox">
                <el-checkbox label="复选框 S"></el-checkbox>
                <el-checkbox label="复选框 F"></el-checkbox>
            </el-checkbox-group>

            <el-date-picker v-model="date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
                            @change="checkFormatDate"></el-date-picker>
            <el-date-picker v-model="datetime" type="datetime" placeholder="选择时间日期" value-format="yyyy-MM-dd HH:mm:ss"
                            @change="checkFormatDateTime"></el-date-picker>

            <el-date-picker v-model="daterange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
                            value-format="yyyy-MM-dd" @change="checkRange"></el-date-picker>
        </el-row>

        <el-row style="margin: 50px 0">
            <el-table :data="tableData" border :header-cell-style="{background:'aliceblue',fontSize:'16px'}">
                <el-table-column label="序号" prop="id" align="center"></el-table-column>
                <el-table-column label="名称" prop="name" align="center"></el-table-column>
                <el-table-column label="年龄" prop="age" align="center"></el-table-column>
                <el-table-column label="地址" prop="address" align="center"></el-table-column>
                <el-table-column label="操作">
                    <template v-slot="scope">
                        <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>

    </div>


</template>

<script>
    export default {
        name: 'Element',
        data() {
            return {
                value: '',
                value1: '',
                value2: '',
                value4: '',
                password: '',
                coffees: [{value: '1星巴克咖啡'}, {value: '2瑞幸咖啡'}, {value: '3库迪咖啡'}],
                select: '',
                select1: '',
                select2: '',
                fruits: [{name: '苹果', id: 1},
                    {name: '香蕉', id: 2},
                    {name: '梨子', id: 3},
                    {name: '橘子', id: 4},],
                users: [
                    {label: '渐哥哥', card: '12365'},
                    {label: '张哥哥', card: '22365'},
                    {label: '六哥哥', card: '32325'},
                    {label: '思哥哥', card: '42305'},
                ],
                radio: '',
                checkList: [],
                date: '',
                datetime: '',
                daterange: '',
                tableData: [
                    {name: '李戬', address: '四川南充', id: 1, age: 20},
                    {name: '李倩', address: '四川南充', id: 2, age: 28},
                    {name: '李二狗', address: '四川营山', id: 1, age: 30},
                ]
            }
        },
        methods: {
            querySearch(query, cb) {
                let result = query ? this.coffees.filter(v => v.value.includes(query)) : this.coffees
                console.log(result)
                cb(result)
            },
            changeSelect() {
                console.log(this.select1)
            },
            changeSelectUser() {
                console.log(this.select2)
            },
            selectRadio() {
                console.log(this.radio),
                    alert(this.radio)
            },
            selectCheckBox() {
                console.log(this.checkList),
                    alert(this.checkList)
            },
            checkFormatDate() {
                console.log(this.date),
                    alert(this.date)
            },
            checkFormatDateTime() {
                console.log(this.datetime),
                    alert(this.datetime)
            },
            checkRange() {
                console.log(this.daterange),
                    alert(this.daterange)
            },
            edit(row) {
                //  alert(row.name)
                //   this.$message.success(row.name)
                //   this.$message.warning(row.name)
                //   this.$notify.success(row.name)
                this.$confirm('这是什么？', '提示', {
                    type: "warning"
                }).then(
                    res => {
                        this.$message.success("ok,我点击了确认")
                    }
                ).catch(() => {
                    this.$message.warning("ok,我点击了取消")
                })
            }
        }

    }
</script>

<style scoped>

</style>